<script lang="ts" setup>
import { computed, ref } from 'vue';
import { useProductStore, useShoppingCartStore, useOrderStore } from '@/stores';
import { onLoad } from '@dcloudio/uni-app';

const product = ref<any>({});
const popupVisible = ref(false);
const productStore = useProductStore();
const shoppingCartStore = useShoppingCartStore();
const orderStore = useOrderStore();
const selectedSkuIndex = ref(0);
const buttonStyle = computed(() => {
	return {
		fontSize: '30rpx',
		lineHeight: '42rpx',
		borderRadius: '14rpx'
	};
});

onLoad(async (param: any) => {
	product.value = await productStore.getProduct({ id: Number(param.id) });
});

function handleViewShoppingCart() {
	uni.navigateTo({
		url: '/pages/shopping-cart/shopping-cart'
	});
}

function handleAddShoppingCart() {
	popupVisible.value = true;
}

async function handleBuy() {
	const order = await orderStore.createOrder([
		{
			productId: product.value.id,
			skuId: product.value.skus[selectedSkuIndex.value].id,
			quantity: 1
		}
	]);
	uni.navigateTo({
		url: '/pages/order-confirm/order-confirm?orderId=' + order.id
	});
}

function handleSelectSku(key: number) {
	selectedSkuIndex.value = key;
}
</script>

<template>
	<x-container direction="vertical" bg-color="#f2f2f2" min-height="100vh" gap="20rpx">
		<!-- 商品信息 -->
		<x-image width="750rpx" height="750rpx" :src="product.cover?.url" :prefix="false"></x-image>
		<x-container direction="vertical" padding="30rpx" bg-color="#fff" gap="32rpx">
			<x-container justify="between" align="end">
				<dlk-currency :value="Number(product.price)" />
				<x-text color="#999999" :size="24">已售卖{{ product.salesVolume }}件</x-text>
			</x-container>
			<x-text color="#333333" :size="28" :line-height="40" bold>{{ product.name }}</x-text>
		</x-container>
		<!-- 用户评价 -->
		<x-container direction="vertical" padding="30rpx" bg-color="#fff">
			<x-container justify="between">
				<x-text color="#222222" :size="28" bold>用户评价（3414）</x-text>
			</x-container>
			<x-divider></x-divider>
			<x-container direction="vertical" gap="32rpx">
				<x-container justify="between" align="center" v-for="_ in 3">
					<x-space align="center">
						<x-avatar></x-avatar>
						<x-text>hae**34</x-text>
					</x-space>
					<x-text color="#999999" :size="24">2024-03-12</x-text>
				</x-container>
			</x-container>
		</x-container>
		<!-- 商品详情 -->
		<x-container direction="vertical" bg-color="#fff" padding="0 0 150rpx">
			<x-container padding="24rpx" bg-color="#fff">
				<x-text color="#222222" :size="28" bold>商品详情</x-text>
			</x-container>
			<template v-for="item in product.detail">
				<x-image mode="widthFix" :src="item.file?.url"></x-image>
			</template>
		</x-container>
	</x-container>
	<x-action-bar fixed>
		<x-row align="center" :gutter="24">
			<x-col flex="120rpx">
				<x-text-icon type="shopping-cart" :size="40" @tap="handleViewShoppingCart">购物车</x-text-icon>
			</x-col>
			<x-col flex="auto">
				<x-space :size="0">
					<x-button type="primary" style="flex: 1" class="button button-left" @tap="handleAddShoppingCart">加入购物车</x-button>
					<x-button type="primary" style="flex: 1" class="button button-right" @tap="popupVisible = true">立即购买</x-button>
				</x-space>
			</x-col>
		</x-row>
	</x-action-bar>
	<x-popup :visible="popupVisible" @cancel="popupVisible = false">
		<x-row>
			<x-col flex="190rpx">
				<x-image width="160rpx" height="160rpx" :src="product.cover?.url" :prefix="false"></x-image>
			</x-col>
			<x-col flex="auto">
				<x-container direction="vertical" height="100%" justify="between" align="start" padding="10rpx 0 0 0">
					<x-space align="end">
						<x-text color="#E0281E" :size="26">到手价</x-text>
						<dlk-currency :value="Number(product.price)" :size="56"></dlk-currency>
					</x-space>
					<dlk-quantity></dlk-quantity>
				</x-container>
			</x-col>
		</x-row>
		<x-divider></x-divider>
		<x-container direction="vertical" padding="24rpx 0 24rpx 0" gap="36rpx">
			<x-text color="#222222" :size="28" bold>课程（{{ product.skus.length }}）</x-text>
			<view class="option">
				<template v-for="(sku, key) in product.skus">
					<view class="item" :class="{ actived: key === selectedSkuIndex }" @tap="handleSelectSku(key)">{{ sku.name }}</view>
				</template>
			</view>
			<x-button type="primary" :custom-style="buttonStyle" @tap="handleBuy">立即购买</x-button>
		</x-container>
	</x-popup>
</template>

<style lang="scss" scoped>
.button {
	padding: 32rpx 65rpx;
	font-size: 30rpx;

	&-left {
		border-radius: 14rpx 0 0 14rpx;
		background: linear-gradient(90deg, #c4d8ff 0%, #92afff 100%);
	}

	&-right {
		border-radius: 0 14rpx 14rpx 0;
		background: linear-gradient(94deg, #0049d6 0%, #0023ad 100%);
	}
}

.option {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20rpx;

	.item {
		color: #222222;
		font-size: 24rpx;
		padding: 16rpx 20rpx;
		background-color: #f6f6f6;
		border-radius: 8rpx;
		border: 1px solid #f6f6f6;

		&.actived {
			color: #0023ad;
			background-color: #e4f0ff;
			border: 1px solid #0023ad;
		}
	}
}
</style>
